<template>
  <div class="my-trade-container">
    <!-- 买入/卖出切换 -->
    <div class="trade-tabs">
      <button
        class="tab"
        :class="{ active: tradeType === 'buy' }"
        @click="tradeTypeChange('buy')"
      >
        买入
      </button>
      <button
        class="tab"
        :class="{ 'active-green': tradeType === 'sell' }"
        @click="tradeTypeChange('sell')"
      >
        卖出
      </button>
    </div>

    <!-- 下单类型切换 -->
    <div class="order-type-tabs">
      <a-tabs v-model="activeKey" @change="tabsChange">
        <a-tab-pane key="limit" tab="限价">
          <LimitOrderForm :tradeType="tradeType" :key="tradeType" />
        </a-tab-pane>
        <a-tab-pane key="market" tab="市价">
          <MarketOrderForm :tradeType="tradeType" :key="tradeType" />
        </a-tab-pane>
        <a-tab-pane key="stopLoss" tab="止盈止损">
          <StopLossOrderForm :tradeType="tradeType" :key="tradeType" />
        </a-tab-pane>
        <a-tab-pane key="strategy" tab="策略订单"
          >Content of Tab Pane 3</a-tab-pane
        >
      </a-tabs>
      <!-- <button
        v-for="type in orderTypes"
        :key="type"
        :class="{ active: orderType === type }"
        @click="orderType = type"
      >
        {{ type }}
      </button> -->
    </div>

    <!-- 不同下单类型的表单 -->
    <!-- <div v-if="orderType === '限价'">
      <LimitOrderForm :tradeType="tradeType" />
    </div> -->
    <!-- <div v-else-if="orderType==='市价'">
      <MarketOrderForm :tradeType="tradeType" />
    </div>
    <div v-else-if="orderType==='止盈止损'">
      <StopOrderForm :tradeType="tradeType" />
    </div>
    <div v-else-if="orderType==='策略订单'">
      <StrategyOrderForm :tradeType="tradeType" />
    </div> -->
  </div>
</template>

<script setup>
import { ref } from "vue";
import LimitOrderForm from "./transactionForm/LimitOrderForm.vue";
import MarketOrderForm from "./transactionForm/MarketOrderForm.vue";
import StopLossOrderForm from "./transactionForm/StopLossOrderForm.vue";

// import { Tabs } from 'ant-design-vue';
// import MarketOrderForm from './MarketOrderForm.vue'
// import StopOrderForm from './StopOrderForm.vue'
// import StrategyOrderForm from './StrategyOrderForm.vue'

const tradeType = ref("buy");
const activeKey = ref("limit");

const tradeTypeChange = (type) => {
  tradeType.value = type;
  const originalButton = document.querySelectorAll(".sc-2c29cb77-0");
  console.log(originalButton, "按钮元素");

  if (type === "buy") {
    if (originalButton[0]) {
      originalButton[0].click();
    } else {
      console.log(".sc-2c29cb77-0元素第一项未找到");
    }
  } else if (type === "sell") {
    // 这里可以添加卖出时的逻辑
    if (originalButton[1]) {
      originalButton[1].click();
    } else {
      console.log(".sc-2c29cb77-0元素第二项未找到");
    }
  }
  // tabsChange(activeKey.value);
};

const tabsTypeId = {
  limit: 0,
  market: 1,
  stopLoss: 2,
  // strategy: "策略订单",
};

const tabsChange = (key) => {

    
  // activeKey.value = key;
  console.log(key, "当前选中的tab的key值");
  const originalTabs = document.querySelectorAll(
    'span[data-click-event="trade_entrust_click"]'
  );
  console.log(originalTabs, "tabs元素");
  // console.log(
  //   document.querySelectorAll(".mantine-GateTabs-tabLabel"),
  //   "mantine-GateTabs-tabLabel"
  // );
  // console.log(
  //   document.querySelectorAll(".mantine-Tabs-tabLabel"),
  //   "mantine-Tabs-tabLabel"
  // );
  // console.log(document.querySelectorAll(".mantine-d4p53s"), "mantine-d4p53s");
  // console.log(document.querySelectorAll(".tr-text-nowrap"), "tr-text-nowrap");
  // console.log(document.querySelectorAll(".tr-font-medium"), "tr-font-medium");

  if (originalTabs[tabsTypeId[key]]) {
    console.log(key, "当前选中的tab的key值");
    console.log(tabsTypeId[key], "tabsTypeId[key]的值");
    console.log(originalTabs[tabsTypeId[key]], "tabs元素");
    setTimeout(() => {
      originalTabs[tabsTypeId[key]].click();
    }, 0);

    // originalTabs[tabsTypeId[key]].dispatchEvent(new Event("click", { bubbles: true }));

    // 尝试多种方式触发点击事件
    // const element = originalTabs[tabsTypeId[key]];

    // const mouseEvent = new MouseEvent('click', {
    //   view: window,
    //   bubbles: true,
    //   cancelable: true
    // });
    // element.dispatchEvent(mouseEvent);

    // element.click();

    // // 3. 确保元素可见和可点击
    // element.style.pointerEvents = 'auto';
    // element.style.opacity = '1';

    // console.log("已尝试触发点击事件");
  } else {
    console.log(`.mantine-4benpe元素未找到`);
  }
};
// const orderTypes = reactive({
//   limit: "限价",
//   market: "市价",
//   stopLoss: "止盈止损",
//   strategy: "策略订单",
// });
// const orderType = ref("限价");
</script>

<style scoped>
.my-trade-container-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.my-trade-container {
  width: 501px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 4px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 99999;
}

.trade-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 400px;
  padding: 20px;
}

.trade-tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.tab {
  flex: 1;
  /* padding: 10px 0; */
  text-align: center;
  height: 33px;
  font-size: 16px;
  font-weight: bold;
  border: none;
  background: #f9f9f9;
  cursor: pointer;
  border-radius: 20px;
  /* 圆角按钮 */
  color: #666;
  /* 默认字体颜色 */
  margin: 0 5px;
  /* 按钮间距 */
}

.tab:first-child {
  clip-path: polygon(0 0, 100% 0, 93% 100%, 0% 100%);
  border-radius: 20px 0 0 20px;
}

.tab:last-child {
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0% 100%);
  border-radius: 0 20px 20px 0;
}

.tab.active {
  background: #f2495e;
  /* 激活状态背景色 */
  color: #fff;
  /* 激活状态字体颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 激活状态阴影 */
}

.tab.active-green {
  background: #1bb273;
  color: #fff;
}

/* 
:deep(.ant-tabs-nav-list .ant-tabs-tab) {
  color: #8e949e !important;
}
:deep(.ant-tabs-nav-list .ant-tabs-tab-active) {
  color: #262933 !important;
} */
.my-trade-container :deep(.ant-tabs-nav .ant-tabs-nav-list .ant-tabs-tab) {
  color: #8e949e !important;
}

.my-trade-container
  :deep(.ant-tabs-nav .ant-tabs-nav-list .ant-tabs-tab-active) {
  color: #262933 !important;
}

.ant-tabs-tab-btn {
  color: #262933;
}

.trade-content {
  border: 1px solid #ddd;
  border-radius: 0 0 8px 8px;
  padding: 20px;
}

.my-trade-type-tabs,
.my-order-type-tabs {
  display: flex;
  margin-bottom: 16px;
}

.my-trade-type-tabs button,
.my-order-type-tabs button {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: #f2f2f2;
  color: #333;
  font-size: 16px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  margin-right: 4px;
}

.my-trade-type-tabs button.active,
.my-order-type-tabs button.active {
  background: #f45b6c;
  color: #fff;
}
</style>
